<template>
    <div class="app-container">
        <el-form :model="form" ref="queryForm" size="small" :inline="true" >
            <el-form-item label="水机名称(平台)" prop="search">
                <el-input v-model="form.title" placeholder="请输入水机名称" />
            </el-form-item>
            <el-form-item label="水机名称（两路主板）" prop="search">
                <el-input v-model="form.mineral_title" placeholder="请输入水机名称"/>
            </el-form-item>
            <el-form-item label="水机名称[富氢水]" prop="search">
                <el-input v-model="form.rich_title" placeholder="请输入水机名称"/>
            </el-form-item>
            <el-form-item label="" prop="search">

                <el-button type="primary" @click="submitForm">确 定</el-button>
            </el-form-item>
        </el-form>
        <el-row border>
            <el-col :span="24" class="card-box">
                <el-card>
                    <div slot="header"><span><i class="el-icon-tickets"></i> 费率参数</span>
<!--                        <el-button @click="addRow">添加行</el-button>-->
                        <el-button
                            style="float: right; padding: 3px 0"
                            type="text"
                            icon="el-icon-refresh-right"
                            @click="refreshJundaList()"
                        >重新获取骏达设备信息</el-button>
                    </div>
                    <el-table  ref="historyWater" width="99vw"  size="small" :data="FreeParamsData">
                        <el-table-column show-overflow-tooltip prop="apparatus_name" label="水机名称" align="center"/>
                        <el-table-column prop="chartype" label="计费方式" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-select v-model="row.chartype">
                                        <el-option label="连续扣费" value="0" />
                                        <el-option label="预扣费" value="1" />
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="persec" label="一升水时间（0.1秒）" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.persec" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="money" label="一升水价格（分）" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.money" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="guefee" label="游客倍率（%）" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.guefee" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="quantity" label="售水水量（毫升）" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.quantity" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span><i class="el-icon-tickets"></i> 售水参数</span></div>
                    <el-table  ref="historyWater" width="99vw"  size="small"
                               :data="SealWaterParamData">
                        <el-table-column show-overflow-tooltip prop="apparatus_name" label="水机名称" align="center"/>
                        <el-table-column prop="Flow" label="流量检测" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Flow" style="width:100%;" permission="0或1"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Ccount" label="投币个数" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Ccount" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Seletor" label="投币器设置" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Seletor" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Lampdelay" label="打水灯延时关闭" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Lampdelay" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Crecycle" label="金额回收时间（秒）" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Crecycle" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Lcokdelay" label="打水回收时间（秒）" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Lcokdelay" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>

            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span><i class="el-icon-tickets"></i> 制水参数</span></div>
                    <el-table  ref="historyWater" width="99vw"  size="small"
                               :data="PurifyWaterParamData">
                        <el-table-column show-overflow-tooltip prop="apparatus_name" label="水机名称" align="center"/>
                        <el-table-column prop="apparatus_id" align="center" label="身份">
                            <template slot-scope="{row}">
                                {{form.id}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="Hlower" label="加热温度下限" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Hlower" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Hupper" label="加热温度上限" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Hupper" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Astart" label="广告灯开启时间" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Astart" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Aend" label="广告灯关闭时间" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Aend" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Pumpspan" label="泵连续工作时长" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-input size="small" v-model="row.Pumpspan" style="width:100%;"></el-input>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="auxHeatMode" label="辅路加热模式" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <div class="input-box">
                                    <el-select v-model="row.auxHeatMode">
                                        <el-option label="关闭" value="0" />
                                        <el-option label="手动" value="1" />
                                        <el-option label="辅热" value="2" />
                                        <el-option label="间隔加热" value="3" />
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-card>
            </el-col>

        </el-row>

    </div>
</template>

<script>

import {getApparatusDetail,getApparatusJundaAllList,updateApparatus}from "@/api/grzq/apparatus.js";

import {getApparatusParamsList,updateApparatusParams} from "@/api/grzq/apparatus_params";
window._AMapSecurityConfig = {
    // 设置安全密钥
    securityJsCode: "2353313c155de6c8befa6921880c92fe",
};

export default {
    name: 'site-edit',
    dicts:['sys_normal_disable','sys_expenses_master_type','sys_expenses_master_status'],
    components: {},
    data() {
        return {
            apparatus_id: '',
            equipmentList: [],
            // 表单参数
            form: {},
            // 费率参数
            FreeParamsData: [],
            //售水参数
            SealWaterParamData: [],
            // 制水参数
            PurifyWaterParamData: [],
            // 表单校验
            rules: {},
            loadingRead:false,
            readList:[],
        }
    },
    created() {

        this.apparatus_id = this.$route.query && this.$route.query.id;
        const apparatus_id = this.apparatus_id= this.$route.query && this.$route.query.id
        if (apparatus_id!=0) {
            this.getSiteDetail(apparatus_id)
        }else {
            this.selectedOptions=[0,0,0]
        }
    },
    methods: {

        /** 查询 */
        async getSiteDetail(id) {
            const { data } = await getApparatusDetail({ id: id })
            this.form = data
            console.log(data)
            let apparatus_id =data.id
            if (data.params_free.length!=0){
                this.FreeParamsData = data.params_free;
            } if (data.params_purify.length!=0){
                this.PurifyWaterParamData = data.params_purify;
            } if (data.params_seal.length!=0){
                this.SealWaterParamData = data.params_seal;
            }
        },

        addRow() {
            const newId = this.FreeParamsData.length + 1; // 假设 ID 是自增的
            const newRow = []; // 根据需要初始化新行数据
            this.FreeParamsData.push(newRow); // 将新行添加到数组中
        },

        async refreshJundaList() {
            const {data} =  await getApparatusParamsList({id:this.apparatus_id});
            this.FreeParamsData = data.FreeParamsData;
            this.PurifyWaterParamData = data.PurifyParamData;
            this.SealWaterParamData = data.SealParamData;
        },

        // /** 提交按钮 */
        submitForm: function() {

            console.log(this.PurifyWaterParamData)
            console.log(this.FreeParamsData)
            console.log(this.SealWaterParamData)

            const  data = {
                purify_data:this.PurifyWaterParamData,
                free_data:this.FreeParamsData,
                seal_data:this.SealWaterParamData,
            };
            updateApparatusParams(data).then(response => {
                this.msgSuccess('修改成功')
                // this.goBack()
            })

        },
        /** 返回按钮 */
        goBack() {
            const obj = {
                path: "/sys/site",
                query: {
                    t: Date.now(),
                }
            };
            // this.$tab.closeOpenPage(obj);
            // this.reset();
        },

    }
}
</script>

<style lang="scss">
.search_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;

    .label {
        color: #000;
        width: 100px;
    }
}
.content {
    position: relative;
}
#panel {
    position: absolute;
    top: 50px;
    right: 20px;
}
#gaode_Map {
    overflow: hidden;
    width: 100%;
    height: 500px;
    margin: 0;
}.amap-sug-result {
     z-index: 2999 !important;
 }

</style>
